<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" href="css/style.css">
    <link href="http://cdn.vip.hfjy.com/newtpl/static/css/swiper.min.css?v=1.0.2" rel="stylesheet">

    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.js"></script>
    <script src="http://cdn.vip.hfjy.com/newtpl/static/js/jquery.swiper.min.js?v=1.0.2"></script>
<style>
    /*.swiper-wrapper img{
        width: 100%;
    }*/
    .pagination {
        position: absolute;
        left: 0;
        text-align: center;
        bottom: .1rem;
        width: 100%;
        z-index: 98;
    }
    .top-banner{position: relative;}
    .top-banner .top-left{position: absolute;left: 0px;top: 43%;width: 8%;}
    .top-jiantou{display: block;}
    .top-banner .top-right{position: absolute;right: 0px;top:43%;width: 8%}

</style>
</head>
<body style="background: #fff;">
  <div class="container">
    <div style="background: #fff;">
        <div class="wx003">
            <p class="tips">可通过下拉屏幕刷新数据</p>
        </div>
        <div style="margin-top: 15px;padding: 0 15px;" class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide top-banner">
                    <img style="width: 100%" src="images/006-01.png" alt="图片加载中">
                    <img class="top-left top-jiantou" src="images/006-04.png">
                    <img class="top-right top-jiantou" src="images/006-05.png">
                </div>

            </div>

        </div>


    </div>
    <div class="overflow">
        <div class="wx01-title overflow" style="padding-top: 5px;">
            <div class="clear">XX路段</div>
        </div>


        <div style="margin-top: 15px;" id="banner" class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <ul class="wx01-second overflow" style="padding-top: 0px;">
                        <li>
                            <dl>
                                <dt class="overflow">
                                    <img class="big-pic" src="images/01-01-pic.png"/>
                                <div class="bg"></div>
                                <p class="text">四环至中梁山</p>
                                </dt>
                                <dd>
                                    <img src="images/01-xin-icon.png">
                                    <span>23</span>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt class="overflow">
                                    <img class="big-pic" src="images/01-01-pic.png"/>
                                <div class="bg"></div>
                                <p class="text">四环至中梁山</p>
                                </dt>
                                <dd>
                                    <img src="images/01-xin-icon.png">
                                    <span>23</span>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt class="overflow">
                                    <img class="big-pic" src="images/01-01-pic.png"/>
                                <div class="bg"></div>
                                <p class="text">四环至中梁山</p>
                                </dt>
                                <dd>
                                    <img src="images/01-xin-icon.png">
                                    <span>23</span>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </div>
                <div class="swiper-slide">
                    <ul class="wx01-second overflow" style="padding-top: 0px;">
                        <li>
                            <dl>
                                <dt class="overflow">
                                    <img class="big-pic" src="images/01-01-pic.png"/>
                                <div class="bg"></div>
                                <p class="text">四环至中梁山</p>
                                </dt>
                                <dd>
                                    <img src="images/01-xin-icon.png">
                                    <span>23</span>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt class="overflow">
                                    <img class="big-pic" src="images/01-01-pic.png"/>
                                <div class="bg"></div>
                                <p class="text">四环至中梁山</p>
                                </dt>
                                <dd>
                                    <img src="images/01-xin-icon.png">
                                    <span>23</span>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt class="overflow">
                                    <img class="big-pic" src="images/01-01-pic.png"/>
                                <div class="bg"></div>
                                <p class="text">四环至中梁山</p>
                                </dt>
                                <dd>
                                    <img src="images/01-xin-icon.png">
                                    <span>23</span>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </div>
                <div class="swiper-slide ">
                    <ul class="wx01-second overflow" style="padding-top: 0px;">
                        <li>
                            <dl>
                                <dt class="overflow">
                                    <img class="big-pic" src="images/01-01-pic.png"/>
                                <div class="bg"></div>
                                <p class="text">四环至中梁山</p>
                                </dt>
                                <dd>
                                    <img src="images/01-xin-icon.png">
                                    <span>23</span>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt class="overflow">
                                    <img class="big-pic" src="images/01-01-pic.png"/>
                                <div class="bg"></div>
                                <p class="text">四环至中梁山</p>
                                </dt>
                                <dd>
                                    <img src="images/01-xin-icon.png">
                                    <span>23</span>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt class="overflow">
                                    <img class="big-pic" src="images/01-01-pic.png"/>
                                <div class="bg"></div>
                                <p class="text">四环至中梁山</p>
                                </dt>
                                <dd>
                                    <img src="images/01-xin-icon.png">
                                    <span>23</span>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </div>
            </div>
            <!--<div id="bannerpagination" class="pagination "></div>-->
        </div>



    </div>
      <div class="wx006 white-bg wx006-first overflow" style="padding-bottom: 0px;">
          <span class="share">
              <a>点击分享</a>
              <img class="weibo" src="images/006-02.png">
              <img class="weixin" src="images/006-03.png">
          </span>

          <a class="direct">显示方向</a>
      </div>
      <div class="wx01-third" style="margin-top: 0">
          <span>
              <img style="width: 22%" src="images/01erweima.png">
          </span>
          <span>
              <img style="width: 29%" src="images/01-foot-center.png">
          </span>
          <span>
              <img style="width: 30%" src="images/01-foot-right.png">
          </span>
      </div>

  </div>
  <script>
      var mySwiper1 = new Swiper('#banner',{
          loop: true,
          autoplay:5000,
          speed:1000,
          pagination: '#bannerpagination',
          paginationClickable: true,
          grabCursor : true,
          parallax:true,
      });
      $(function(){

          $(".direct" ).click(function(){
              $('.top-jiantou' ).each(function(){
                  if($(this ).css('display')=='none'){
                      $(this ).css('display','block')
                  }else if($(this ).css('display')=='block'){
                      $(this ).css('display','none')
                  }
              })
              //if($('.top-jiantou' ).css())
          })
      })
  </script>

</body>
</html>